<template>
  <div>
    <head-top title="集市"></head-top>
    <div class="content-wrap">
      <van-search
        v-model="search"
        @search="onSearch"
        @clear="AllGoods"
        maxlength="5"
        placeholder="请输入搜索的内容"
      >
        <template #left-icon>
          <van-icon name="search" @click="onSearch" />
        </template>
      </van-search>
      <van-tabs v-model="active" @click="onClick" sticky swipeable>
        <van-tab
          v-for="(item, index) in goodsTypeList"
          :title="item.typeName"
          :name="item.goodsTypeId"
          :key="index"
        >
        </van-tab>
        <van-loading v-if="loading" size="20" text-size="14"
          >加载中...</van-loading
        >
        <div
          v-else-if="goodsList && goodsList.length > 0"
          class="list"
          v-for="(goods, goodsIndex) in goodsList"
          :key="goodsIndex"
          @click="Goods(goods)"
        >
          <van-image fit="cover" lazy-load :src="goods.goodsUrl" />
          <div class="cotnent">
            <div class="price">
              {{ goods.amount | formatFront
              }}<span>{{ goods.amount | formatAfter }}元宝</span>
            </div>
            <div class="name">
              {{ goods.goodsDesc }}
            </div>
            <div class="describe">
              {{ goods.qq }}
            </div>
          </div>
        </div>
        <div class="null" v-else>没有更多数据</div>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import HeadTop from "@/components/head";
import {
  Tab,
  Tabs,
  Search,
  Image as VanImage,
  Lazyload,
  Loading,
  Icon,
} from "vant";
import { goodsType, allGoods, searchGoods } from "@/api/market";
Vue.use(Lazyload, {
  lazyComponent: true,
});
export default {
  components: {
    HeadTop,
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [VanImage.name]: VanImage,
    [Loading.name]: Loading,
    [Icon.name]: Icon,
  },
  data() {
    return {
      search: "",
      active: "",
      loading: true,
      goodsTypeList: [
        {
          goodsTypeId: "",
          typeName: "推荐",
        },
      ],
      goodsList: [],
    };
  },
  filters: {
    formatFront(text) {
      if (!text) return;
      return text.substring(0, text.indexOf("."));
    },
    formatAfter(text) {
      if (!text) return;
      return text.substr(text.lastIndexOf("."));
    },
  },
  created() {
    goodsType({ noMember: true }).then((res) => {
      this.goodsTypeList = this.goodsTypeList.concat(res.data.resultData);
    });
    this.AllGoods();
  },
  methods: {
    onSearch(val) {
      this.loading = true;
      this.active = "";
      var search = this.search.replace(/\s+/g, "");
      if (search) {
        searchGoods({ goodsName: search, noMember: true }).then((res) => {
          this.loading = false;
          this.goodsList = res.data.resultData;
        });
      }else{
        this.AllGoods();
      }
    },
    onClick(name) {
      this.active = name;
      this.search = "";
      this.AllGoods();
    },
    AllGoods() {
      this.loading = true;
      allGoods({ goodsTypeId: this.active, noMember: true }).then((res) => {
        this.loading = false;
        this.goodsList = res.data.resultData;
      });
    },
    Goods({ goodsId, goodsDesc }) {
      const query = {
        goodsId,
        goodsDesc,
      };
      this.$router.push({
        name: "goodsDetails",
        query,
      });
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .van-search {
    position: absolute;
    top: 0;
    left: 17px;
    right: 17px;
    padding: 0;
    z-index: 1;
    .van-search__content {
      border-radius: 2px;
      border: 1px solid #f1f1f1;
      background: none;
    }
  }
  .van-tabs {
    position: relative;
    padding-top: 20px;
    /deep/.van-sticky {
      padding-top: 20px;
    }
    /deep/.van-sticky--fixed {
      padding: 20px 17px 0 17px;
      background: #fff;
    }
    /deep/.van-tabs__nav {
      padding: 0;
      .van-tab {
        padding: 0;
        margin: 0 20px 0 0;
        &:nth-last-child(2) {
          margin-right: 0;
        }
        .van-tab__text {
          font-size: 16px;
          font-weight: 400;
          color: #000000;
        }
        &.van-tab--active {
          span {
            color: #fe4b08;
            font-weight: bold;
          }
        }
      }
      .van-tabs__line {
        bottom: 8px;
        height: 2px;
        max-width: 16px;
        border-radius: 0;
        background: #fe4b08;
      }
    }
    .list {
      position: relative;
      margin-bottom: 12px;
      background: #ffffff;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
      border-radius: 7px;
      overflow: hidden;
      .van-image {
        width: 100%;
        height: 198px;
      }
      .cotnent {
        padding: 8px;
        .price {
          line-height: 30px;
          font-size: 18px;
          font-weight: 600;
          color: #f34a38;
          span {
            font-size: 14px;
          }
        }
        .name {
          padding: 5px 0;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
          border-bottom: 1px solid #f1f1f1;
        }
        .describe {
          margin-top: 2px;
          font-size: 12px;
          font-weight: 400;
          color: #999999;
          line-height: 17px;
        }
      }
    }
    .null {
      padding: 13px 0;
      text-align: center;
      font-size: 12px;
      color: #666;
    }
  }
}
</style>